<!--eslint-disable-->
<template>
    <div class="segment">
      <div
        class="segment-option1"
        :class="{ active: selectedOption === '年' }"
        @click="selectOption('年')"
      >
        年
      </div>
      <div
        class="segment-option2"
        :class="{ active: selectedOption === '月' }"
        @click="selectOption('月')"
      >
        月
      </div>
      <div
        class="segment-option3"
        :class="{ active: selectedOption === '日' }"
        @click="selectOption('日')"
      >
        日
      </div>
    </div>
  </template>
<script>
/* eslint-disable */
  export default {
    data() {
      return {
        selectedOption: '年',
      };
    },
    methods: {
      selectOption(option) {
        this.selectedOption = option;
      },
    },
  };
  </script>
  
  <style scoped>
  .segment {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
  
  .segment-option1 {
    display: block;
    position: absolute;
    width: 55px;
    top: 2.5px;
    left: 2.5px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    /* background-color: rgba(0, 0, 0, 0.2); */
    font-family: '黑体';
    color: aliceblue;
    font-size: 20px;
    border-radius: 8px;
  }
  .segment-option2 {
    display: block;
    position: absolute;
    width: 55px;
    top: 2.5px;
    left: 62.5px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    /* background-color: rgba(0, 0, 0, 0.2); */
    font-family: '黑体';
    color: aliceblue;
    font-size: 20px;
    border-radius: 8px;
  }
  .segment-option3 {
    display: block;
    position: absolute;
    width: 55px;
    top: 2.5px;
    left: 122.5px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    /* background-color: rgba(0, 0, 0, 0.2); */
    font-family: '黑体';
    color: aliceblue;
    font-size: 20px;
    border-radius: 8px;
  }
  
  .segment-option1.active {
    background-color: rgba(255, 255, 255,0.2);
    color:lightskyblue;
  }
  .segment-option2.active {
    background-color: rgba(255, 255, 255,0.2);
    color:lightskyblue;
  }
  .segment-option3.active {
    background-color: rgba(255, 255, 255,0.2);
    color:lightskyblue;
  }
  </style>
  